<template>
  <a-pagination
    class="pagination"
    :pageSizeOptions="pageSizeOptions"
    :total="total"
    showSizeChanger
    :pageSize="per_page"
    v-model="payload.page"
    @showSizeChange="onShowSizeChange"
    @change="changeCurrent"
  >
    <template slot="buildOptionText" slot-scope="props">
      <span v-if="props.value!=='50'">{{props.value}}条/页</span>
      <span v-if="props.value==='50'">全部</span>
    </template>
  </a-pagination>
</template>
<script>
export default {
  props: {
    payload: {
      type: Object,
      default: () => ({
        page: 1,
        per_page: 10
      })
    },
    pageSizeOptions: {
      type: Array,
      default: () => (['12', '20', '30', '40', '50'])
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      per_page: this.payload.per_page
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.per_page = pageSize
      const payload = {
        page: current,
        per_page: pageSize
      }
      this.$parent.saveParams(payload)
    },
    changeCurrent(page) {
      const payload = {
        page
      }
      this.$parent.saveParams(payload)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  text-align: right;
  margin-top: 15px;
}
</style>
